<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>用户中心</title>
    <script type="text/javascript" src="../../../resources/js/lib/jquery.1.8.3.min.js"
            th:src="@{/resources/js/lib/jquery.1.8.3.min.js}"></script>
</head>
<body>
<div>
    <a href="center.html" th:href="@{/user/add}">添加用户</a>
</div>
<div>
    <table>
        <thead>
        <tr>
            <th>id</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>用户名</th>
            <th>出生日期</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody th:if="${#lists.isEmpty(userList)}">
            <tr>
                <td colspan="7" align="center">暂无数据</td>
            </tr>
        </tbody>
        <tbody th:each="user : ${userList}">
        <tr>
            <td th:text="${user.id}"></td>
            <td th:text="${user.name}"></td>
            <td th:text="${user.gender.value}"></td>
            <td th:text="${user.age}"></td>
            <td th:text="${user.username}"></td>
            <td th:text="${#dates.format(user.birthday,'yyyy-MM-dd')}"></td>
            <td>
                <!-- 链接传参-->
                <a href="#" th:href="@{/user/update(id=${user.id})}">修改</a>
                |
                <!-- 创建 thymeleaf onclick 点击事件，并传参 -->
                <a href="javascript:;" th:onclick="'deleteUser('+${user.id}+');'">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
    <div th:if="${not #lists.isEmpty(userList)}">用户列表不为空</div>
    <div th:unless="${not #lists.isEmpty(userList)}">用户列表为空</div>
</div>

<script>
    var ctx = '[[@{/}]]';

    function deleteUser(id) {
        if (confirm("是否删除用户!")) {
            $.post(ctx + "/user/delete/" + id, function (result) {
                if (!result.success) {
                    alert(result.message);
                    return false;
                }
                window.location.reload();
            })
        }
    }
</script>

</body>
</html>